<template>
  <el-dialog
    title="选择活动券"
    :visible="visible"
    width="60%"
    top="7.5vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @close="handlerClose"
  >
    <el-checkbox-group v-model="checkedIds" :max="max">
      <el-table
        v-loading="loading"
        height="328"
        :data="tableData"
        tooltip-effect="dark"
        highlight-current-row
        @current-change="currentChange"
      >
        <el-table-column label="选择" width="50">
          <template slot-scope="scope">
            <el-checkbox :label="scope.row.id">{{ '' }}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="issue_no"
          label="活动券期号"
          show-overflow-tooltip
        />
        <el-table-column
          label="卡券类型"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <coupon-type :row="scope.row"></coupon-type>
          </template>
        </el-table-column>
        <el-table-column
          label="优惠信息"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <coupon-info :row="scope.row"></coupon-info>
          </template>
        </el-table-column>
      </el-table>
    </el-checkbox-group>
    <!-- 分页 start -->
    <el-pagination
      :current-page.sync="paginate.page"
      :page-size="paginate.count"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="loadTableData"
    />
    <!-- 分页 end -->
    <div slot="footer" class="dialog-footer">
      <form-footer @cancel="handlerClose" @submit="handlerConfirm" />
    </div>
  </el-dialog>
</template>

<script>
import FormFooter from '@/components/form-footer'
import CouponType from '@/pages/market/ticket/manage/components/couponType'
import CouponInfo from '@/pages/market/ticket/manage/components/couponInfo'

export default {
  name: 'ChoiceChannelCodeDialog',
  components: {
    CouponType,
    CouponInfo,
    FormFooter
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 已经选中的活动券
    value: {
      type: Array,
      required: true
    },
    // 活动id
    ticketId: {
      type: [String, Number],
      require: true,
      default: 0
    },
    // 最大选择数量
    max: {
      type: Number,
      default: 9999
    }
  },
  data() {
    return {
      loading: true,
      // 总数量
      total: 0,
      paginate: {
        page: 1,
        count: 10
      },
      tableData: [],
      // 选中的活码列表
      checkedIds: this.value ? [].concat(this.value) : []
    }
  },
  created() {
    this.loadTableData()
  },
  methods: {
    // 加载表格数据
    loadTableData() {
      this.loading = true;
      this.$http.get(
          '/admin/market/ticket/' + this.ticketId + '/coupon/choose/list',
          this.paginate,
          ({ data }) => {
            const {
              datas = [],
              paginate: { total }
            } = data;

            this.tableData = datas;
            this.total = total;
            this.loading = false
          },
          ({ msg }) => {
            this.$message.error(msg)
            this.loading = false
          },
          false
      )
    },
    // 取消选择
    handlerClose() {
      this.$emit('update:visible', false);
    },

    // 单行选中
    currentChange(row) {
      // this.checkedIds.push(row.id)
    },
    // 确认选择
    handlerConfirm() {
      if (this.checkedIds.length === 0) {
        this.$message.warning('请选择活动券');
        return
      }
      this.$emit('input', this.checkedIds)
      this.$emit('selected', this.checkedIds)
      this.$emit('update:visible', false);
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";

.group-list {
  height: 100%;

  .group-list-scrollbar {
    //height: calc(100vh - 212px);

    ::v-deep .el-scrollbar__wrap {
      overflow-x: hidden;
    }

    .group-item {
      @include lineItem;
    }
  }
}
</style>
